<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <script type="text/javascript">
        const siteUrl = "./",
            musicMp3 = "media/bgm.mp3"
    </script>
    <link rel="stylesheet" href="css/music.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/ani.css?&t=201704041722" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/animate.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/common.css?&t=201704041722" rel="stylesheet" type="text/css">
</head>
<body>

    <audio id="jiasu" preload>
        <source src="media/jiasu.mp3" type="audio/mpeg">
    </audio>
    <audio id="jiasu1" preload>
        <source src="media/jiasu1.mp3" type="audio/mpeg">
    </audio>
    <audio id="jiansu" preload>
        <source src="media/jiansu.mp3" type="audio/mpeg">
    </audio>


    <div class="loading">
        <div class="loading-box">
            <div class="loading-mask-box">
                <div class="mask-move"></div>
            </div>
            <p><span id="loadingNum">0</span>%</p>
        </div>
    </div>

    <div class="page index1">
        <!-- 首页start -->
        <div id="index">
            <!--<img class="slogan" src="img/slogan_img.png" alt="">-->
            <!--<img class="game-info" src="img/game_info_img.png" alt="">-->
            <div class="game-level-choose-box">
                <div class="game-level-item animated pulse infinite slow">
                    <img class="level-name-icon" src="img/level_one_name_icon.png" alt="">
                    <img class="game-level-choose-img" src="img/game_level_one_choose.png" width="100%" alt="">
                    <div class="game-top-box">今日最高分<br /><span>10000</span>分</div>
                </div>
                <div class="game-level-item animated pulse infinite slow">
                    <img class="level-name-icon" src="img/level_two_name_icon.png" alt="">
                    <!--<img class="game-level-choose-img" src="img/game_level_two_choose_lock.png" width="100%" alt="">-->
                    <img class="game-level-choose-img" src="img/game_level_two_choose_unlock.png" width="100%" alt="">
                    <div class="game-top-box">今日最高分<br /><span>10000</span>分</div>
                </div>
                <!-- lock -->
                <div class="game-level-item animated pulse infinite slow">
                    <img class="level-name-icon" src="img/level_three_name_icon.png" alt="">
                    <!--<img class="game-level-choose-img" src="img/game_level_three_choose_lock.png" width="100%" alt="">-->
                    <img class="game-level-choose-img" src="img/game_level_three_choose_unlock.png" width="100%" alt="">
                    <div class="game-top-box">今日最高分<br /><span>10000</span>分</div>
                </div>
            </div>
            <div class="bottom-btn">
                <img class="rank-btn animated slideInLeft" src="img/rank_btn_img1.png" alt="">
                <img class="rule-btn animated slideInRight" src="img/rule_btn_img1.png" alt="">
            </div>
        </div>
        <!-- 首页end -->

        <!-- 引导start -->
        <div class="pop-bg" id="guide" style="display: block;">
            <div class="pop-box">
                <img class="pop-box-close" src="img/pop_box_close.png" alt="">
                <div class="pop-box-head guide"><img src="img/follow_title_img.png" alt=""></div>
                <div class="pop-box-content guide">
                    <p>NGK火花塞赛车游戏欢乐来袭<br />玩游戏赢 <strong style="font-size: .46rem;">海量</strong> 红包</p>
                    <p>每日榜单前三名再得<br /><strong style="font-size: .46rem;" class="red">588、388、188</strong> 大奖红包！</p>
                    <p>关注【NGK火花塞】公众号，对话框回复“<span class="red">666</span>”获取游戏链接，即可参与游戏赢取惊喜福利！</p>
                    <img src="img/qr_code.png" alt="">
                    <p>长按识别，立即关注</p>
                </div>
            </div>
        </div>
        <!-- 引导end -->

        <!-- 规则start -->
        <div class="pop-bg" id="rule">
            <div class="pop-box">
                <img class="pop-box-close" src="img/pop_box_close.png" alt="">
                <div class="pop-box-head"><img src="img/pop_title_rule.png" alt=""></div>
                <div class="pop-box-content rule">
                    <p><span>1.</span>活动时间：10.9-10月10日23:59</p>
                    <p><span>2.</span>游戏共3个关卡，每关初始限时30秒，行驶里程越高得分越高，单关行驶里程达4500米即通关</p>
                    <p><span>3.</span>关卡可重复挑战，单次或多次挑战关卡累计获得分14000米里程，可获得一次抽取红包奖励的机会</p>
                    <p><span>4.</span>玩家每日单关最高里程得分将计入排行榜单，活动期间每日得分最高的三位，分别可获得588元、388元、188元红包</p>
                    <p><span>5.</span>活动期间，总积分前三名，人均1辆NGK定制款车模（1:18）</p>
                    <p><span>6.</span>以上所有奖项均在10月11日在官方微信公示</p>
                    <p class="tips">*活动最终解释权归NGK火花塞所有</p>
                </div>
            </div>
            <!--<div class="pop-box-tips">奖品发放以游戏结束时的最终排名为准</div>-->
            <div class="bottom-btn">
                <img class="again-btn" src="img/again_btn_img.png" alt="">
                <img class="share-btn" src="img/share_btn_img.png" alt="">
            </div>
        </div>
        <!-- 规则end -->

        <!-- 排名start -->
        <div class="pop-bg" id="rank">
            <div class="pop-box rank">
                <img class="pop-box-close" src="img/pop_box_close.png" alt="">
                <div class="pop-box-head"><img src="img/pop_title_rank.png" alt=""></div>
                <div class="pop-box-content">
                    <div class="my-rank-box">
                        <div class="rank-num">64</div>
                        <img class="rank-acc" src="img/cainiao_icon.png" alt="" />
                        <div class="rank-name">这里是本人这里是本人这里是本人</div>
                        <div class="rank-score">56.999</div>
                    </div>
                    <div class="rank-list-box">
                        <ul>
                            <li>
                                <div class="rank-num"><img src="img/first_icon.png" alt=""></div>
                                <img class="rank-acc" src="img/cargod_icon.png" alt="" />
                                <div class="rank-name">这里是本人</div>
                                <div class="rank-score">569.999</div>
                            </li>
                            <li>
                                <div class="rank-num"><img src="img/secend_icon.png" alt=""></div>
                                <img class="rank-acc" src="img/cargod_icon.png" alt="" />
                                <div class="rank-name">这里是本人</div>
                                <div class="rank-score">569.999</div>
                            </li>
                            <li>
                                <div class="rank-num"><img src="img/third_icon.png" alt=""></div>
                                <img class="rank-acc" src="img/cargod_icon.png" alt="" />
                                <div class="rank-name">这里是本人</div>
                                <div class="rank-score">569.999</div>
                            </li>
                            <li>
                                <div class="rank-num">4</div>
                                <img class="rank-acc" src="img/daren_icon.png" alt="" />
                                <div class="rank-name">这里是本人</div>
                                <div class="rank-score">569.999</div>
                            </li>
                            <li>
                                <div class="rank-num">5</div>
                                <img class="rank-acc" src="img/daren_icon.png" alt="" />
                                <div class="rank-name">这里是本人</div>
                                <div class="rank-score">569.999</div>
                            </li>
                            <li>
                                <div class="rank-num">6</div>
                                <img class="rank-acc" src="img/cainiao_icon.png" alt="" />
                                <div class="rank-name">这里是本人</div>
                                <div class="rank-score">569.999</div>
                            </li>
                            <li>
                                <div class="rank-num">7</div>
                                <img class="rank-acc" src="img/cainiao_icon.png" alt="" />
                                <div class="rank-name">这里是本人</div>
                                <div class="rank-score">569.999</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="pop-box-tips">排行榜数据为截至今日凌晨0点成绩<br/>奖品发放以游戏结束时的最终排名为准</div>
            <div class="bottom-btn">
                <img class="again-btn" src="img/again_btn_img.png" alt="">
                <img class="share-btn" src="img/share_btn_img.png" alt="">
            </div>
        </div>
        <!-- 排名end -->

        <!-- 游戏结束start -->
        <div class="pop-bg" id="gameOver">
            <div class="pop-box game-over">
                <div class="pop-box-head">
                    <img src="img/pop_title_success.png" alt="">
                    <!--<img src="img/pop_title_failed.png" alt="">-->
                </div>
                <div class="pop-box-content">
                    <div class="game-acc-show">
                        <!--<img src="img/cainiao_icon.png" alt="">-->
                        <!--<img src="img/daren_icon.png" alt="">-->
                        <img src="img/cargod_icon.png" alt="">
                    </div>
                    <div class="game-title-show">NGK赛车车神</div>
                    <div class="game-score-show">
                        本局里程<strong></strong><span>M</span>
                    </div>
                    <div class="game-tips-show">
                        <p>闯关成功，请挑战下一关</p>
                        <!--<p>单圈里程超过1.8km即闯关成功</p>-->
                        <!--<p>请再接再厉！</p>-->
                    </div>
                    <div class="game-redbag-box">
                        <img id="getRedbag" src="img/get_redbag_btn_fail.png" alt="">
                        <p>里程每累计18000m，可抽取一次红包</p>
                    </div>
                </div>
                <img class="share-btn poster" src="img/make_poster_btn.png" alt="">
            </div>
            <div class="game-level-choose-box">
                <div class="game-level-item animated pulse infinite slow">
                    <img class="level-name-icon" src="img/level_one_name_icon.png" alt="">
                    <img class="game-level-choose-img" src="img/game_level_one_choose.png" width="100%" alt="">
                    <p>今日最高分<br /><span>10000</span>分</p>
                </div>
                <div class="game-level-item animated pulse infinite slow">
                    <img class="level-name-icon" src="img/level_two_name_icon.png" alt="">
                    <img class="game-level-choose-img" src="img/game_level_two_choose_unlock.png" width="100%" alt="">
                    <p>今日最高分<br /><span>10000</span>分</p>
                </div>
                <div class="game-level-item animated pulse infinite slow">
                    <img class="level-name-icon" src="img/level_three_name_icon.png" alt="">
                    <img class="game-level-choose-img" src="img/game_level_three_choose_unlock.png" width="100%" alt="">
                    <p>今日最高分<br /><span>10000</span>分</p>
                </div>
            </div>
            <div class="bottom-btn">
                <img class="rank-btn" src="img/rank_btn_img.png" alt="">
                <img class="rule-btn" src="img/rule_btn_img.png" alt="">
            </div>
        </div>
        <!-- 游戏结束end -->

        <!-- 抽红包start -->
        <div class="pop-bg" id="redbag">
            <div class="pop-box">
                <img class="pop-box-close" src="img/pop_box_close.png" alt="">
                <div class="pop-box-head"><img src="img/pop_title_redbag.png" alt=""></div>
                <div class="pop-box-content">
                    <div class="redbag-info-box">
                        <p>游戏里程每累计14000米可抽一次红包，</p>
                        <p>当前可抽奖里程<span>18000m</span>，现在可抽<span>1</span>次。</p>
                    </div>
                    <div class="redbag-item-box">
                        <img class="animated pulse slow infinite" id="openRedbag" src="img/redbag_img.png" alt="">
                        <div class="redbag-get-info" id="win">
                            <div class="redbag-price"><span>1.08</span>元</div>
                            <p>恭喜您抽中红包<br />
                            红包已发放到你的账号<br />
                            请注意查收</p>
                        </div>
                        <div class="redbag-get-info" id="lose">
                            <p>很遗憾<br />本次未抽中红包</p>
                        </div>

                    </div>
                </div>
                <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3NjQ4NTUwMg==#wechat_redirect"><img class="follow" src="img/follow_btn.png" alt=""></a>
            </div>
            <div class="bottom-btn">
                <img class="again-btn" src="img/again_btn_img1.png" alt="">
                <img class="share-btn" src="img/share_btn_img.png" alt="">
            </div>
        </div>
        <!-- 抽红包end -->

        <!-- 拥挤start -->
        <div class="pop-bg" id="wrong">
            <div class="pop-box wrong">
                <img class="pop-box-close" src="img/pop_box_close.png" alt="">
                <div class="pop-box-content">
                    <div class="sorry-box">
                        <h1>很抱歉</h1>
                        <p>目前赛道拥挤，请稍后再试</p>
                    </div>
                </div>
                <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3NjQ4NTUwMg==#wechat_redirect"><img class="follow" src="img/follow_btn.png" alt=""></a>
            </div>
        </div>
        <!-- 拥挤end -->

        <!-- 拥挤start -->
        <div class="pop-bg" id="list">
            <div class="pop-box">
                <div class="pop-box-head"><img src="img/pop_title_list.png" alt=""></div>
                <div class="pop-box-content">
                    <ul class="win-list-box">
                        <li>
                            <div class="win-list-gift">第一名 <strong>IPHONE XS MAX</strong></div>
                            <div class="win-list-name">这里是昵称这里是昵称</div>
                        </li>
                        <li>
                            <div class="win-list-gift">第二名 <strong>戴森吹风机</strong></div>
                            <div class="win-list-name">这里是昵称</div>
                        </li>
                        <li>
                            <div class="win-list-gift">第三名 <strong>JBL蓝牙音箱</strong></div>
                            <div class="win-list-name">这里是昵称</div>
                        </li>
                    </ul>
                    <div class="list-tips-box">
                        <p>请在2019.4.18 23:59联系工作人员，<br />领取游戏奖品，过时不候喔~</p>
                    </div>
                </div>
                <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3NjQ4NTUwMg==#wechat_redirect"><img class="follow" src="img/follow_btn.png" alt=""></a>
            </div>
        </div>
        <!-- 拥挤end -->

        <!-- 游戏start -->
        <div class="page game" id="game">
            <div class="sky"></div>
            <div class="ground">
                <div class="bg-move-box bg-move">
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                    <img src="img/bg1-2.png" width="100%" />
                </div>
                <!--<div class="road-move-box">-->
                    <!--<img class='road-move' src='img/road1.jpg' />-->
                    <!--<img class='road-move' src='img/road1.jpg' />-->
                    <!--<img class='road-move' src='img/road1.jpg' />-->
                    <!--<img class='road-move' src='img/road1.jpg' />-->
                <!--</div>-->
                <div class="road-move-box">
                </div>
                <div class="road-add-box">
                    <img class='road-add' src='img/ngk_add.png' width='100%' />
                </div>
                <img class="road" src="img/road.png" width="100%" alt="">
                <img class="game-item" src="img/items/dhxq.png" id="dhxq" alt="">
                <img class="game-item" src="img/items/hus.png" id="hus" alt="">
                <img class="game-item" src="img/items/lz.png" id="lz" alt="">
                <img class="game-item" src="img/items/yt.png" id="yt" alt="">
                <img class="game-item" src="img/items/husy.png" id="husy" alt="">
                <img class="game-item" src="img/items/qiang.png" id="qiang" alt="">
                <img class="game-item" src="img/items/qiyoutong.png" id="qiyoutong" alt="">
                <img class="game-item" src="img/items/luntai.png" id="luntai" alt="">
                <img class="game-item" src="img/items/sd.png" id="sd" alt="">
                <img class="game-item" src="img/items/bk.png" id="bk" alt="">
            </div>
            <div class="game-info-box">
                <div class="speed-meter-box"><img src="img/pointer_icon.png" width="100%" alt="" /></div>
                <div class="timer-meter-box"><span></span>S</div>
                <div class="kilometre-meter-box"></div>
            </div>
            <img class="pass animated fadeOutUp slow" src="img/pass_img.png" width="100%" alt="">
            <img class="longer animated fadeOutUp slow" src="img/long_time_img.png" width="100%" alt="">
            <!--<div class="game-pause"><img src="img/pause_icon.png" width="100%" alt=""></div>-->
            <div class="car-box animated">
                <img class="jiasu" src="img/car-jiasu.png" width="100%" alt="" />
                <img class="jiasu1" src="img/car-jiasu1.png" width="100%" alt="" />
                <img class="jiasu2" src="img/car-jiasu2.gif" width="100%" alt="" />
                <img class="jiansu" src="img/car-jiansu.png" width="100%" alt="" />
                <img src="img/car.png" width="100%" alt="" />
            </div>

            <div class="left-btn" id="left"></div>
            <div class="right-btn" id="right"></div>
        </div>
        <!-- 游戏end -->

        <div class="game-into-box">
            <img class="game-into" src="img/game_into_box.png" width="100%" alt="">
            <div class="back-index" id="backIndex"><img src="img/back_index.png" alt=""></div>
            <div class="game-start animated pulse slow infinite" id="gameStart"><img src="img/game_start1.png" alt=""></div>
        </div>

        <div class="game-start-timer"><img src="img/3.png" alt=""></div>

        <div class="pop-bg1"></div>
        <div class="share-box" id="share">
            <div id="box">
                <img src="img/post1.jpg" width="100%" alt="" />
                <img class="qr-code1" src="img/qr_code.png" alt="" />
                <div class="share-name other">
                    <div class="share-img-box">
                        <img src="img/user_demo.jpg" alt="">
                    </div>
                    <div>
                        <div>这里是昵称</div>
                        <div>NGK赛车达人</div>
                    </div>
                    <img class="icon" src="img/cargod_icon.png" alt="">
                </div>
            </div>
            <img id="target" width="100%" alt="" />
            <div class="share-tips">长按你的专属海报，分享朋友一起来战</div>
            <div class="back-index" id="shareBack"><img src="img/back_index.png" width="100%" alt=""></div>
        </div>
    </div>

    <script language="javascript" type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script language="javascript" type="text/javascript" src="js/music.js"></script>
    <script language="javascript" type="text/javascript" src="js/NoSleep.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/vconsole.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/html2canvas.min.js"></script>

    <script type="text/javascript">
        // window.vConsole = new window.VConsole({
        //     onReady: function() {
        //         console.log('vConsole is ready.');
        //     },
        // });

        var voice_jiasu = document.getElementById('jiasu');
        var voice_jiasu1 = document.getElementById('jiasu1');
        var voice_jiansu = document.getElementById('jiansu');

        voice_jiasu.play();
        voice_jiasu1.play();
        voice_jiansu.play();
        voice_jiasu.pause();
        voice_jiasu1.pause();
        voice_jiansu.pause();
        document.addEventListener("WeixinJSBridgeReady", function () {
            voice_jiasu.play();
            voice_jiasu1.play();
            voice_jiansu.play();
            voice_jiasu.pause();
            voice_jiasu1.pause();
            voice_jiansu.pause();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function() {
            voice_jiasu.play();
            voice_jiasu1.play();
            voice_jiansu.play();
            voice_jiasu.pause();
            voice_jiasu1.pause();
            voice_jiansu.pause();
        }, false);

        var soundPlay = function(id) {
            if (id == 'jiasu'){
                voice_jiasu.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    voice_jiasu.play();
                }, false);
                document.addEventListener('YixinJSBridgeReady', function() {
                    voice_jiasu.play();
                }, false);
            }
            if (id == 'jiasu1') {
                voice_jiasu1.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    voice_jiasu1.play();
                }, false);
                document.addEventListener('YixinJSBridgeReady', function() {
                    voice_jiasu1.play();
                }, false);
            }
            if (id == 'jiansu') {
                voice_jiansu.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    voice_jiansu.play();
                }, false);
                document.addEventListener('YixinJSBridgeReady', function() {
                    voice_jiansu.play();
                }, false);
            }
        };

        var noSleep = new NoSleep();
        var loadingNum = 0;
        var loadingInt = setInterval(function () {
            if (loadingNum >= 100) {
                $('.loading').hide();
                clearInterval(loadingInt);
                return;
            }
            loadingNum ++;
            $('#loadingNum').html(loadingNum);
        },50);


        $('.pop-box-close').click(function (e) {
            $('#rank').hide();
            $('#rule').hide();
            $('#redbag').hide();
            $('#wrong').hide();
            $('#guide').hide();
        });

        $('.rank-btn').click(function (e) {
            $('#rank').show();
        });

        $('.rule-btn').click(function (e) {
            $('#rule').show();
        });

        $('.again-btn').click(function (e) {
            $('#rank').hide();
            $('#rule').hide();
            $('#redbag').hide();
        });

        $('.pop-bg1').click(function (e) {
            $('.pop-bg1').hide();
            $('#share').hide();
        });

        $('#shareBack').click(function (e) {
            $('.pop-bg1').hide();
            $('#share').hide();
        });

        $('.share-btn').click(function (e) {
            $('.pop-bg1').show();
            $('#share').show();
            takeScreenshot();
        });

        function takeScreenshot() {
            console.log('test');
            html2canvas(document.querySelector("#box"),{
                useCORS: true, //（图片跨域相关）
                allowTaint: true, //允许跨域（图片跨域相关）
                taintTest: true, //是否在渲染前测试图片
            }).then(canvas => {
                //$('.show_box').append("<img src='"+canvas.toDataURL()+"'/>");
                var img = document.querySelector('#target');
                img.src = canvas.toDataURL("image/png");
                $('#box').hide();
            });
        }

        $('.game-level-item').click(function (e) {
            if (!$(this).hasClass('lock')){
                gameLevelChoose = $(this).index();
                switch (gameLevelChoose) {
                    case 0:
                        $('.game-into').attr('src','img/game_into_box.png');
                        $('.game').addClass('scene-one');
                        $('.game').removeClass('scene-two');
                        $('.game').removeClass('scene-three');
                        break;
                    case 1:
                        $('.game-into').attr('src','img/game_into_box1.png');
                        $('.game').removeClass('scene-one');
                        $('.game').addClass('scene-two');
                        $('.game').removeClass('scene-three');
                        break;
                    case 2:
                        $('.game-into').attr('src','img/game_into_box2.png');
                        $('.game').removeClass('scene-one');
                        $('.game').removeClass('scene-two');
                        $('.game').addClass('scene-three');
                        break;
                }
                $('#index').hide();
                $('.pop-bg').hide();
                $('#game').show();

                //gameStartFun();
                $('.pop-bg1').show();
                $('.game-into-box').show();

                document.body.addEventListener('touchstart',touch, {passive: false});
                document.body.addEventListener('touchend',touch, {passive: false});
                //document.body.addEventListener('touchmove',touch,{passive: false});
            }
        });

        $('#getRedbag').click(function (e) {
            if($(this).hasClass('failed')) return;
            $('#redbag').show();
        });

        $('#openRedbag').click(function (e) {
            $('.redbag-info-box').hide();
            $('.redbag-item-box').addClass('bg');
            $(this).hide();
            //$('#win').show();
            $('#lose').show();
        });

        var fps = 60;
        var now;
        var then = Date.now();
        var interval = 1000 / fps;
        var delta;
        var frame;
        var setIntObj;
        var setIntAdd;
        var gameTimer;
        var roadNum = 0;
        var addNum = 0;
        var speed = 0;
        var forTime = 0;
        var maxSpeed = 4; //4
        var gameTime = 30; //游戏时间
        var score = 0; //游戏里程
        var ls = 0;
        var setIntItem;
        var roundPos = 0;
        var turnRight = false;
        var turnLeft = false;
        var speedUpTimes = 0; //游戏中加速次数
        var speedDownTimes = 0; //游戏中减速次数
        var ytShowTimes = 0; //油桶出现次数
        var timeUpTimes = 0; //游戏中时间增加次数
        var itemArr = ['dhxq','hus','lz','yt','husy','qiang'];
        var leftOrRight = ['left-move','right-move','left-move','right-move','middle-move'];
        var itemNum = 0;
        var itemConfirm = false;
        var toMaxSpeed = false;
        var toMaxSpeed1 = false;
        var toMaxSpeed2 = false;
        var toLowSpeed = false;
        var toLowSpeed1 = false;
        var isPause = false;
        var passNum = 4500; //通关公里数
        var gameLevelChoose = 0; //游戏关卡选择
        var itemName = '';
        var direction = '';
        var itemPro = 120;
        var itemHitTime = 0;
        var gameInit = function () {
            roadNum = 0;
            addNum = 0;
            speed = 0;
            forTime = 0;
            maxSpeed = 4;
            gameTime = 30;
            score = 0;
            ls = 0;
            setIntItem;
            roundPos = 0;
            turnRight = false;
            turnLeft = false;
            speedUpTimes = 0;
            speedDownTimes = 0;
            ytShowTimes = 0;
            timeUpTimes = 0;
            itemArr = ['dhxq','hus','lz','yt','husy','qiang'];
            leftOrRight = ['left-move','right-move','left-move','right-move','middle-move'];
            itemNum = 0;
            itemConfirm = false;
            toMaxSpeed = false;
            toMaxSpeed1 = false;
            toMaxSpeed2 = false;
            toLowSpeed = false;
            toLowSpeed1 = false;
            isPause = false;
            itemPro = 120;
            itemHitTime = 0;
            $('.ground').css('transform','translate('+roundPos+'%)');
            $('.sky').css('transform','translate('+roundPos+'%)');
            $('.timer-meter-box').find('span').html(gameTime);
            $('.redbag-info-box').show();
            $('.redbag-item-box').removeClass('bg');
            $('#openRedbag').show();
            $('#win').hide();
            $('#lose').hide();
        };

        var bodyScroll = function (event){
            event.preventDefault();
        };

        $('.game-pause').click(function (e) {
            if ($(this).hasClass('pause')){
                $(this).find('img').attr('src','img/pause_icon.png');
                $(this).removeClass('pause');
                isPause = false;
            }else{
                $(this).find('img').attr('src','img/play_icon.png');
                $(this).addClass('pause');
                isPause = true;
            }
        });

        var gameRound = function () {
            forTime++;
            if (toLowSpeed1){
                if (forTime - itemHitTime >= 120){
                    $('.car-box').removeClass('swing');
                    toLowSpeed1 = false;
                    $('.jiansu').hide();
                }
                maxSpeed = 0.5;
            }else if (toLowSpeed){
                if (forTime - itemHitTime >= 120){
                    $('.car-box').removeClass('swing');
                    toLowSpeed = false;
                    $('.jiansu').hide();
                }
                maxSpeed = 1;
            }else if (toMaxSpeed){
                if (forTime - itemHitTime >= 120){
                    $('.car-box').removeClass('move-on');
                    toMaxSpeed = false;
                    //$('.jiasu1').hide();
                    $('.jiasu2').hide();
                }
                maxSpeed = 3;
            }else if (toMaxSpeed2) {
                if (forTime - itemHitTime >= 180){
                    $('.car-box').removeClass('move-on');
                    toMaxSpeed2 = false;
                    //$('.jiasu').hide();
                    $('.jiasu2').hide();
                }
                maxSpeed = 3;
            }else if (toMaxSpeed1){
                if (forTime - itemHitTime >= 120){
                    $('.car-box').removeClass('move-on');
                    toMaxSpeed1 = false;
                    $('.jiasu2').hide();
                }
                maxSpeed = 4;
            }else{
                maxSpeed = 2;
            }
            if (speed <= 0) speed=0;
            speed>=maxSpeed?speed=maxSpeed:speed +=0.05;
            ls += speed;
            score = Math.floor(ls);
            if (score > passNum) $('.pass').fadeIn();
            $('.kilometre-meter-box').html(score);
            $('.speed-meter-box').css('-webkit-transform','rotate('+ (speed*60-120)+'deg)');

            if (forTime%21 == 0){
                $('.road-move').eq(roadNum).show();
                roadNum ++;
            }
            if (forTime%60 == 0) {
                gameTime--;
                itemPro <= 90 ? itemPro=90:itemPro -= 2;
                //console.log(itemPro);
            }
            if (forTime%itemPro == 0) {
                direction = leftOrRight[Math.floor(Math.random()*5)];
                if (direction == 'middle-move'){
                    itemName = itemArr[Math.floor(Math.random()*(itemArr.length-3))+3];
                }else{
                    itemName = itemArr[Math.floor(Math.random()*itemArr.length)];
                }
                $('.game-item').hide();
                $('.game-item').removeClass('middle-move');
                $('.game-item').removeClass('left-move');
                $('.game-item').removeClass('right-move');
                $('#'+itemName).addClass(direction);
                $('#'+itemName).show();
                itemConfirm = true;
                if (itemName == 'yt') ytShowTimes ++;
                if (ytShowTimes == 3){
                    ytShowTimes++;
                    switch (gameLevelChoose) {
                        case 0:
                            itemArr.splice(3,1,'lz','qiang');
                            break;
                        case 1:
                            itemArr.splice(3,1,'qiyoutong','sd');
                            break;
                        case 2:
                            itemArr.splice(3,1,'bk','luntai');
                            break;
                    }
                }
            }
            $('.timer-meter-box').find('span').html(gameTime);

            if (turnRight){
                if (roundPos <= -25){
                    speed = 1;
                    return;
                }
                roundPos --; //right
                speed -= 0.04;
            }
            if (turnLeft) {
                if (roundPos >= 25){
                    speed = 1;
                    return;
                }
                roundPos ++; //left
                speed -= 0.04;
            }

            $('.ground').css('transform','translate('+roundPos+'%)');
            $('.sky').css('transform','translate('+roundPos+'%)');

            //console.log(itemConfirm);
            //console.log(itemArr.length);
            if (itemConfirm) {
                if ($('#'+itemName).offset().top > $(window).height()){
                    $('#'+itemName).hide();
                    $('.game-item').removeClass('move-fast');
                    itemConfirm = false;
                }else if ($('#'+itemName).offset().top > $('.car-box').offset().top && $('#'+itemName).offset().top < ($('.car-box').offset().top + $('.car-box').height()/2)){
                    if (($('#'+itemName).hasClass('left-move') && roundPos > 0 && roundPos < 25) || ($('#'+itemName).hasClass('right-move') && roundPos > -25 && roundPos < 0) || ($('#'+itemName).hasClass('middle-move') && roundPos > -10 && roundPos < 10)) {
                        hitItemFun(itemName);
                        $('#'+itemName).hide();
                        itemConfirm = false;
                    }
                }
            }

            if (gameTime <= 0) gameOverFun();
        };

        var tick = function() {
            window.cancelAnimationFrame(frame);
            frame = window.requestAnimationFrame(tick);
            now = Date.now();
            delta = now - then;
            if (delta > interval) {
                then = now - (delta % interval);
                if (isPause) {
                    $('.bg-move').addClass('pause');
                    $('.road-move').addClass('pause');
                    $('.road-add').addClass('pause');
                    $('.game-item').addClass('pause');
                    return;
                }else {
                    $('.bg-move').removeClass('pause');
                    $('.road-move').removeClass('pause');
                    $('.road-add').removeClass('pause');
                    $('.game-item').removeClass('pause');
                }
                gameRound();
            }
        };

        var hitItemFun = function (id) {
            if (!itemConfirm) return;
            switch (id) {
                case 'dhxq':
                    $('.game-item').addClass('move-fast');
                    itemHitTime = forTime;
                    if ($('.control').hasClass('show_loop')) soundPlay('jiasu');
                    $('.car-box').addClass('move-on');
                    $('.car-box').removeClass('swing');
                    toLowSpeed = false;
                    toLowSpeed1 = false;
                    toMaxSpeed = false;
                    toMaxSpeed1 = true;
                    toMaxSpeed2 = false;
                    $('.jiasu').hide();
                    $('.jiasu1').hide();
                    $('.jiasu2').show();
                    $('.jiansu').hide();
                    speedUpTimes ++;
                    break;
                case 'husy':
                    $('.game-item').addClass('move-fast');
                    itemHitTime = forTime;
                    if ($('.control').hasClass('show_loop')) soundPlay('jiasu1');
                    $('.car-box').addClass('move-on');
                    $('.car-box').removeClass('swing');
                    toLowSpeed = false;
                    toLowSpeed1 = false;
                    toMaxSpeed = false;
                    toMaxSpeed1 = false;
                    toMaxSpeed2 = true;
                    // $('.jiasu').show();
                    // $('.jiasu1').hide();
                    // $('.jiasu2').hide();
                    // $('.jiansu').hide();
                    $('.jiasu').hide();
                    $('.jiasu1').hide();
                    $('.jiasu2').show();
                    $('.jiansu').hide();
                    speedUpTimes ++;
                    break;
                case 'hus':
                    $('.game-item').addClass('move-fast');
                    itemHitTime = forTime;
                    if ($('.control').hasClass('show_loop')) soundPlay('jiasu');
                    $('.car-box').addClass('move-on');
                    $('.car-box').removeClass('swing');
                    toLowSpeed = false;
                    toLowSpeed1 = false;
                    toMaxSpeed = true;
                    toMaxSpeed1 = false;
                    toMaxSpeed2 = false;
                    // $('.jiasu').hide();
                    // $('.jiasu1').show();
                    // $('.jiasu2').hide();
                    // $('.jiansu').hide();
                    $('.jiasu').hide();
                    $('.jiasu1').hide();
                    $('.jiasu2').show();
                    $('.jiansu').hide();
                    speedUpTimes ++;
                    break;
                case 'qiang':
                case 'lz':
                case 'qiyoutong':
                case 'sd':
                case 'bk':
                case 'luntai':
                    $('.game-item').removeClass('move-fast');
                    itemHitTime = forTime;
                    console.log('jiansu');
                    if ($('.control').hasClass('show_loop')) soundPlay('jiansu');
                    $('.car-box').removeClass('move-on');
                    $('.car-box').removeClass('swing');
                    setTimeout(function () {$('.car-box').addClass('swing');},100);
                    toLowSpeed = true;
                    toLowSpeed1 = false;
                    toMaxSpeed = false;
                    toMaxSpeed1 = false;
                    speedDownTimes ++;
                    $('.jiasu').hide();
                    $('.jiasu1').hide();
                    $('.jiasu2').hide();
                    $('.jiansu').show();
                    break;
                case 'yt':
                    $('.longer').hide();
                    setTimeout(function () {$('.longer').show();},100);
                    gameTime += 3;
                    timeUpTimes ++;
                    setTimeout(function () {
                        $('.longer').hide();
                    },2000);
                    break;
            }
        };

        // var orientationHandler = function (e) {
        //     if (e.gamma < -10){
        //         turnLeft = true;
        //     }else if (e.gamma > 10) {
        //         turnRight = true;
        //     }else{
        //         turnLeft = false;
        //         turnRight = false;
        //     }
        // };

        var x = 0;
        function touch (event){
            var event = event || window.event;
            event.preventDefault();

            switch(event.type){
                case "touchstart":
                    //console.log('touchstart!!');
                    if (event.target.id == 'left'){
                        $('#left').addClass('on');
                        $('#right').removeClass('on');
                        turnLeft = true;
                    }else if (event.target.id == 'right'){
                        $('#left').removeClass('on');
                        $('#right').addClass('on');
                        turnRight = true;
                    }
                    //x = event.touches[0].pageX;
                    //console.log('x:'+x);
                    break;
                // case "touchmove":
                //     var newX = event.touches[0].pageX;
                //     if (newX > x) {
                //         //right
                //         if (roundPos <= -25){
                //             roundPos = -25;
                //             speed = 1;
                //             return;
                //         }
                //         roundPos += (newX-x)/50 * -1;
                //     }else{
                //         //left
                //         if (roundPos >= 25){
                //             roundPos = 25;
                //             speed = 1;
                //             return;
                //         }
                //         roundPos += (x - newX)/50;
                //     }
                //     break;
                case "touchend":
                    //console.log('touchend!!');
                    $('#left').removeClass('on');
                    $('#right').removeClass('on');
                    turnLeft = false;
                    turnRight = false;
                    break;
            }
        }

        var gameStartFun = function(){
            switch (gameLevelChoose) {
                case 0:
                    $('.bg-move-box').find('img').attr('src','img/bg1-2.png');
                    itemArr = ['dhxq','hus','yt','husy','qiang','lz','qiang','lz','qiang','lz'];
                    break;
                case 1:
                    $('.bg-move-box').find('img').attr('src','img/bg2-2.png');
                    itemArr = ['dhxq','hus','yt','husy','sd','qiyoutong','sd','qiyoutong','sd','qiyoutong'];
                    break;
                case 2:
                    $('.bg-move-box').find('img').attr('src','img/bg3-2.png');
                    itemArr = ['dhxq','hus','yt','husy','bk','luntai','bk','luntai','bk','luntai'];
                    break;
            }
            //window.addEventListener("deviceorientation", orientationHandler, false);
            $('.bg-move').find('img').show();
            $('.road-add').show();
            tick();
        };

        $('#backIndex').bind('touchend',function (e) {
            $('#index').show();
            $('.pop-bg').hide();
            $('#game').hide();

            //gameStartFun();
            $('.pop-bg1').hide();
            $('.game-into-box').hide();

            document.body.removeEventListener('touchstart',touch, {passive: false});
            document.body.removeEventListener('touchend',touch, {passive: false});
        });

        $('#gameStart').bind('touchstart',function (e) {
            //noSleep.enable();
            $('.pop-bg1').hide();
            $('.game-into-box').hide();
            $('.game-start-timer').show();
            var gameStartNum = 1;
            var gameStartTimer = setInterval(function () {
                gameStartNum ++;
                if (gameStartNum == 2){
                    $('.game-start-timer').find('img').attr('src','img/2.png');
                }
                if (gameStartNum == 3){
                    $('.game-start-timer').find('img').attr('src','img/1.png');
                }
                if (gameStartNum == 4){
                    $('.game-start-timer').find('img').attr('src','img/3.png');
                    $('.game-start-timer').hide();
                    $('.road-move-box').addClass('move');
                    gameStartFun();
                }
            },1000);
        });

        var gameOverFun = function () {
            //noSleep.disable();
            $('.road-move-box').removeClass('move');
            $('.pass').hide();
            $('.longer ').hide();
            $('.bg-move').find('img').hide();
            $('.road-add').hide();
            $('.road-move').hide();
            $('.game-item').removeClass('left-move');
            $('.game-item').removeClass('right-move');
            $('.game-item').hide();
            $('.jiasu').hide();
            $('.jiasu1').hide();
            $('.jiasu2').hide();
            $('.jiansu').hide();
            $('.car-box').removeClass('swing');
            $('.car-box').removeClass('move-on');
            document.body.removeEventListener('touchstart',touch, {passive: false});
            document.body.removeEventListener('touchend',touch, {passive: false});
            //document.body.removeEventListener('touchmove',touch,{passive: false});
            window.cancelAnimationFrame(frame);
            clearInterval(setIntItem);
            $('#game').hide();
            $('#gameOver').show();
            $('.game-score-show').find('strong').html(score);
            if (score < 4500) {
                $('#gameOver .pop-box-head').find('img').attr('src','img/pop_title_failed.png');
                $('.game-acc-show').find('img').attr('src','img/cainiao_icon.png');
                $('.game-title-show').html('NGK赛车菜鸟');
                $('.game-tips-show').find('p').html('单圈成绩超过4500m即可通关，继续加油吧！');
                $('#getRedbag').attr('src','img/get_redbag_btn_fail.png');
                $('#getRedbag').addClass('failed');
            }else if (score < 6000) {
                $('#gameOver .pop-box-head').find('img').attr('src','img/pop_title_success.png');
                $('.game-acc-show').find('img').attr('src','img/daren_icon.png');
                $('.game-title-show').html('NGK赛车达人');
                $('.game-tips-show').find('p').html('再接再厉，更好成绩等你来刷新！');
                $('#getRedbag').attr('src','img/get_redbag_btn.png');
                $('#getRedbag').removeClass('failed');
            }else {
                $('#gameOver .pop-box-head').find('img').attr('src','img/pop_title_success.png');
                $('.game-acc-show').find('img').attr('src','img/cargod_icon.png');
                $('.game-title-show').html('NGK赛车车神');
                $('.game-tips-show').find('p').html('再接再厉，更好成绩等你来刷新！');
                $('#getRedbag').attr('src','img/get_redbag_btn.png');
                $('#getRedbag').removeClass('failed');
            }
            gameInit();
        };
    </script>
</body>
</html>